<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <base href="<%=basePath%>">
    <base href="<%=request.getContextPath()%>/"/>
    <link rel="stylesheet" href="/webjars/layui/2.5.5/css/layui.css">
    <style>
        .layui-table-cell{
            height: 30px;
        }
    </style>
</head>
<body>

<form class="layui-form" action="">
        <div class="layui-form-item" style="margin-top: 50px">
            <div class="layui-inline">
                <label class="layui-form-label">线路状态</label>
                <div class="layui-input-inline">
                    <select  id="service" name="service" lay-verify="required"  class="select">
                        <option value=" ">--请选择--</option>
                    </select>
                </div>
                <label class="layui-form-label">线路编号</label>
                <div class="layui-input-inline">
                    <input type="text" name="title" id="XianLu" lay-verify="title" autocomplete="off" placeholder="请输入线路编号" class="layui-input">
                </div>
                <div class="layui-input-inline">
                    <button type="button" class="layui-btn layui-btn-normal zengJiQxMessage" onclick="ChaXun()">
                        查询
                    </button>
                </div>
                <div class="layui-inline">
                    <button type="button" class="layui-btn layui-btn-normal zengJiQxMessage" onclick="XinZeng()" style="margin-left:100px">
                        <i class="layui-icon">&#xe608;</i>添加线路
                    </button>
                </div>
            </div>
        </div>
</form>



    <div class="layui-container" style="width:100%;margin-top:50px ">
        <table id="AttTb" lay-filter="AttTb" lay-data="AttTb"></table>
    </div>

<!--修改-->
    <div id="update" style="display: none" class="layui-form-item">
        <form class="layui-form" lay-filter="updateForm"  action="" method="post">
            <div class="layui-form-item">
                <div class="layui-inline" style="margin-top: 40px">
                    <div class="layui-input-inline">
                        <input type="hidden" name="id" style="width: 150px" class="layui-input">
                    </div>
                    <label class="layui-form-label">线路编号:</label>
                    <div class="layui-input-inline">
                        <input type="text" name="lineCode" style="width: 150px" class="layui-input">
                    </div>
                    <label class="layui-form-label">线路名称:</label>
                    <div class="layui-input-inline">
                        <input type="text" name="lineName" style="width: 150px" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">线路长度:</label>
                <div class="layui-input-inline">
                    <input type="text" name="lineLength" style="width: 150px" class="layui-input">
                </div>
                <label class="layui-form-label">回路长度:</label>
                <div class="layui-input-inline">
                    <input type="text"  name="backLength" style="width: 150px" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">投运日期</label>
                    <div class="layui-input-inline">
                        <input type="date" class="layui-input" name="productDate" placeholder="yyyy-MM-dd">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">电压等级:</label>
                <div class="layui-input-block">
                    <input type="text" name="voltageLevel" style="width: 150px" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">起始杆号:</label>
                <div class="layui-input-inline">
                    <input type="text" disabled name="startPoleCode" style="width: 150px;border: none" class="layui-input">
                </div>
                <label class="layui-form-label">终止杆号:</label>
                <div class="layui-input-inline">
                    <input type="text" disabled name="endPoleCode" style="width: 150px;border: none" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">塔基数:</label>
                <div class="layui-input-inline">
                    <input type="text" disabled name="towerBaseNum" style="width: 150px;border: none" class="layui-input">
                </div>
                <label class="layui-form-label">备注:</label>
                <div class="layui-input-inline">
                    <textarea placeholder="请输入内容" style="min-height: 50px;"  class="layui-textarea" name="common"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">运行状态</label>
                <div class="layui-input-block">
                    <input type="radio" name="runningStatus" value="23" title="正常" checked=""><div class="layui-unselect layui-form-radio layui-form-radioed"><i class="layui-anim layui-icon"></i><div>启用</div></div>
                    <input type="radio" name="runningStatus" value="24" title="检修中"><div class="layui-unselect layui-form-radio"><i class="layui-anim layui-icon"></i><div>停用</div></div>
                </div>
            </div>
        </form>
    </div>

<!--增加-->
<div id="add" style="display: none" class="layui-form-item">
    <form class="layui-form" lay-filter="addForm"  action="" method="post">
        <div class="layui-form-item">
            <div class="layui-inline" style="margin-top: 40px">
                <input type="hidden" name="a" id="GanTaiHao">
                <label class="layui-form-label">线路编号:</label>
                <div class="layui-input-inline">
                    <input type="text" name="lineCode" style="width: 150px" class="layui-input">
                </div>
                <label class="layui-form-label">线路名称:</label>
                <div class="layui-input-inline">
                    <input type="text" name="lineName" style="width: 150px" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">线路长度:</label>
            <div class="layui-input-inline">
                <input type="text" name="lineLength" style="width: 150px" class="layui-input">
            </div>
            <label class="layui-form-label">回路长度:</label>
            <div class="layui-input-inline">
                <input type="text" id="backLength" name="backLength" style="width: 150px" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">投运日期</label>
                <div class="layui-input-inline">
                    <input type="date" class="layui-input" id="productDate" name="productDate" placeholder="yyyy-MM-dd">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">电压等级:</label>
            <div class="layui-input-block">
                <input type="text" name="voltageLevel" style="width: 150px" class="layui-input">
            </div>
        </div>
        <div class="layui-input-inline" style="margin-left: 30px;margin-bottom: 10px">
            <button type="button" class="layui-btn layui-btn-normal TianJiaQuXian" id="TianJiaQuXian" onclick="TianJiaGan()">
                添加杆号
            </button>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">起始杆号:</label>
            <div class="layui-input-inline">
                <input type="text" name="startPoleCode" disabled id="qiShi" style="width: 150px;border: none" class="layui-input">
            </div>
            <label class="layui-form-label">终止杆号:</label>
            <div class="layui-input-inline">
                <input type="text" name="endPoleCode" id="zhongZhi" disabled style="width: 150px;border: none" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">塔基数:</label>
            <div class="layui-input-inline">
                <input type="text" name="towerBaseNum" disabled id="towerBaseNum" style="width: 150px;border: none" class="layui-input">
            </div>
            <label class="layui-form-label">备注:</label>
            <div class="layui-input-inline">
                <textarea placeholder="请输入内容" style="min-height: 50px;"  class="layui-textarea" name="common"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">是否启用</label>
            <div class="layui-input-block">
                <input type="radio" name="isStart" value="1" title="启用" checked=""><div class="layui-unselect layui-form-radio layui-form-radioed"><i class="layui-anim layui-icon"></i><div>启用</div></div>
                <input type="radio" name="isStart" value="2" title="停用"><div class="layui-unselect layui-form-radio"><i class="layui-anim layui-icon"></i><div>停用</div></div>
            </div>
        </div>
    </form>
</div>



<div id="ATb" class="layui-container" style="width:100%;display: none">
    <table id="AddTb" lay-filter="AddTb" lay-data="AddTb"></table>
</div>

    <script type="text/html" id="caozuo">
        <div class="layui-input-block" style="margin-left: 0px">
            <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" style="margin-left:20px" lay-event="update" >修改</button>
            <button type="button" class="layui-btn layui-btn-normal layui-btn-sm" lay-event="del">删除</button>
        </div>
    </script>
    <script type="text/html" id="qiyong">
        <div class="layui-input-block" style="margin-left: 0px">
            <!--value={{d.isStart}} -->
            <input type="checkbox" lay-skin="switch" data="" id="sv"   lay-filter="switchTest" value="{{d.id}}" lay-text="已启用|已禁用" {{ d.isStart=="1"?"checked":""}}>
        </div>
    </script>
<script src="/webjars/layui/2.5.5/layui.js" charset="utf-8"></script>
<script>
    layui.use("table",function () {
        let form =layui.form;
        let $=layui.$;
        let table = layui.table;
        table.render({
            id:"AttTb",
            elem: "#AttTb",
            url: "/XianLuGuanLi/XianLuCha",
            cols:[
                [
                    {title: "编号", field: "id",hide:true},
                    {title: "线路编号", field: "lineCode"},
                    {title: "线路名称", field: "lineName"},
                    {title: "起始杆号", field: "startPoleCode"},
                    {title: "终止杆号", field: "endPoleCode"},
                    {title: "塔基数", field: "towerBaseNum"},
                    {title: "运行状态", field: "runningStatus",templet(d){
                            return d.runningStatus==23?"正常":"检修中";
                        }},
                    {title: "启动状态", templet: "#qiyong"},
                    {title: "操作",templet: "#caozuo"}
            ]
            ],
             page:{
                   limit:3,
                   limits:[3,6,9]}

        })
        form.on('switch(switchTest)',function(data){
            let articleState = this.checked ? '1' : '2';
            let rowId=data.value;
            data.value=articleState;
            let a=this.checked;


            console.log(a+"ss")
            console.log(data.date+"pp")
            console.log(rowId+"bb")
            console.log(articleState+"cc")
            $.post("/XianLuGuanLi/qxZhuAngTaiGai",{"id":rowId,"zhuAngTai":articleState})
                .done(
                    result=>{
                        layer.msg(result.msg,{icon:6})
                    })
            // alert(data.value)
            // console.log(data.elem); //得到checkbox原始DOM对象
            // console.log(data.elem.checked); //开关是否开启，true或者false
            // console.log(data.value); //开关value值，也可以通过data.elem.value得到
            // console.log(data.othis); //得到美化后的DOM对象

        });
        table.on("tool(AttTb)",function ({data,event}) {
            switch (event) {
                case "update":
                    update(data)
                    break;
                case "del":
                    del(data.id);
                    break;
            }
        })
        /*下拉框赋值*/
        $.ajax({
            url:"/XianLuGuanLi/XiaLaKuang",
            dataType: 'json',
            success: function(data) {
                if (data!== null) {
                    $("#service").empty();
                    $("#service").append(new Option("--请选择--", " "));
                    $.each(data, function(index, item) {
                        console.log(item.id)
                        $('#service').append(new Option(item.configName,item.id));
                    });
                } else {
                    $("#service").append(new Option("暂无数据", ""));
                }
                //重新渲染
                form.render("select");
            }
        })
    })
    function ChaXun() {
        layui.use(['form','layedit', 'laydate','table','jquery'], function(){
            var $ = layui.$;
            let lineName=$("#XianLu").val();
            let id=$("#service").val();
            console.log(id)
            let where={lineName,id,curr:1};
            layui.table.reload("AttTb",{where});
        });
    }
    function XinZeng() {
        layui.use(["layer","form","jquery","table"],function () {
            let layer=layui.layer;
            let $=layui.jquery;
            let table=layui.table;

            $("#add>form")[0].reset();
            layer.open({
                type:1,
                title:"添加用户",
                area:["650px","600px"],
                btn:["确定","取消"],
                content:$("#add"),
                yes(){
                    let params=layui.form.val("addForm");
                    console.log(params)
                    $.post("/XianLuGuanLi/add",params)
                        .done(({msg})=>{
                            layer.close(layer.index);
                            layui.table.reload("AttTb");
                            layer.msg(msg);
                        })
                    let arr=table.checkStatus("AddTb").data;
                    let aa;
                    let ShuZu=new Array();
                    for(let i=0;i<arr.length;i++){
                        aa=arr[i].id;
                        ShuZu.push(aa)
                    }
                    let a= JSON.stringify(ShuZu)

                    $.ajax({
                        url:"/XianLuGuanLi/duoXiuGai?lineCode="+params.lineCode+"&lineName="+params.lineName,
                        type:'POST',
                        data:a,
                        dataType:'json',
                        contentType: 'application/json;charset=utf-8',
                        success:function(data){

                        }
                    });
                    layer.closeAll();
                }
            })
        })
    }
    function del(c) {
        layui.use(["jquery","layer","form","table"],function () {
            let $=layui.$;
            let table=layui.table;
            let layer=layui.layer;
            // let where ={page:1};
            console.log(c)
            layer.confirm("确认删除吗",{title:"删除确认"},function (index) {
                $.post("/XianLuGuanLi/del",{id:c},
                    function (c) {
                        if(c.msg=="成功"){
                            alert("删除成功")
                            layer.close(layer.index);
                            table.reload('AttTb',{
                                url: '/XianLuGuanLi/XianLuCha'
                                ,page: {
                                    curr: 1 //重新从第 1 页开始
                                }
                            });
                        }else {
                            alert("删除失败")
                        }
                    })
            })

        });
    }

    function update(data) {
        layui.use(["jquery","layer","form","table"],function () {
            let layer=layui.layer;
            let $=layui.$;
            let table=layui.table;
            layui.form.val("updateForm",data)
            console.log(data+"aa")
            table.reload('AttTb',{
                url: '/XianLuGuanLi/XianLuCha'
                ,page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
            layer.open({
                type:1,
                title:"修改用户",
                area:["650px","560px"],
                btn:["确定","取消"],
                content:$("#update"),
                yes(){
                    let params=layui.form.val("updateForm");
                    console.log(params+"aa")
                    $.post("/XianLuGuanLi/PsLIUpdate",params,function (c) {
                        if(c.msg=="修改成功"){
                            alert("修改成功")
                            table.reload("AttTb")
                            layer.close(layer.index);
                            layer.msg(msg);
                        }else {
                            alert("修改失败")
                        }
                    })
                }
            })

        });
    }


    function TianJiaGan() {
        layui.use(["jquery","layer","form","table"],function () {
            let layer=layui.layer;
            let $=layui.$;
            let table=layui.table;
            table.render({
                id:"AddTb",
                elem: "#AddTb",
                url: "/XianLuGuanLi/ChaXunMeiXianGan",
                cols:[
                    [
                        {type:"checkbox"},
                        {title: "编号", field: "id"},
                        {title: "线路编号", field: "poleCode"}
                    ]
                ]
            })
            layer.open({
                type:1,
                title:"添加杆号",
                area:["400px","300px"],
                btn:["确定","取消"],
                content:$("#ATb"),
                yes(){
                    let arr=table.checkStatus("AddTb").data;
                    if(arr.length<=1){
                        alert("请选择两个或多个值")
                        return
                    }
                    let ShuZu=new Array();
                    for(let i=0;i<arr.length;i++){
                        let a=arr[i].id;
                        ShuZu.push(a)
                    }
                    // $.post("/XianLuGuanLi/ChaZuiDa?id="+ShuZu)
                    //     .done(({msg})=>{
                    //         layer.close(layer.index);
                    //         layui.table.reload("AddTb");
                    //         alert("保存成功")
                    //         layer.msg(msg);
                    //
                    //     })
                    let a= JSON.stringify(arr)
                    $.ajax({
                        url:"/XianLuGuanLi/ChaZuiDa",
                        type:'POST',
                        data:a,
                        dataType:'json',
                        contentType: 'application/json;charset=utf-8',
                        success:function(data){
                            console.log(ShuZu)
                            let o=ShuZu.length;
                            $("#qiShi").val(data[0].min);
                            $("#zhongZhi").val(data[0].max);
                            $("#GanTaiHao").val(ShuZu);
                            $("#towerBaseNum").val(o);
                            layer.close(layer.index);
                        }
                    });
                }
            })
        })
    }

</script>


</body>
</html>